<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="author" content="PIXINVENT">
<title>自助售货管理后台</title>
<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
<style>
	.accordion {
		width: 300px;
	}
	.card-header {
		width: 300px;
	}
	.btn.btn-link {
		width:200px;
	}
  .modal-dialog {
    max-width: 1200px; /* 调整为你需要的最大宽度 */
    margin: 30px auto; /* 调整上下边距和居中 */
}

.modal-body {
    max-height: 600px; /* 调整为你需要的最大高度 */
    overflow-y: auto; /* 如果内容超出最大高度，显示滚动条 */
}
</style>
</head>
<body>
<div class="content-wrapper">
  <div class="content-header">
    <div class="content-header-left mb-2 clearfix">
      <h3 class="content-header-title mb-0">采购记录</h3>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>订单ID</th>
                <th>总金额</th>
                <th>订单日期</th>
                <th>订单状态</th>
				<th>操作</th>
              </tr>
            </thead>
            <tbody id="showOrder">
              <!-- 表格行 1 -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
	<div class="modal-dialog" role="document">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="exampleModalLongTitle">商品详情</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
		  <table class="table">
			<tr>
				<th>商品名称</th>
				<th>商品品牌</th>
				<th>商品出售价</th>
				<th>商品采购价</th>
				<th>商品数量</th>
				<th>小计</th>
				<th>描述</th>
			</tr>
			<tbody id="showSupplierAndProductMessage">

			</tbody>
		  </table>

		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		  <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
		</div>
	  </div>
	</div>
  </div>
  <div class="page clearfix">
    <div class="pull-left">共 <span id="totalCount"></span>条记录 第 <span id="pageNum"></span> / <span id="pages"></span> 页</div>
    <div class="pull-right">
      <nav aria-label="..." class="pull-left">
        <ul class="pagination" id="pagination">
          <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
          <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
        </ul>
      </nav>
      <div class="pull-left p-r-20  p-l-20">
        <select class="form-control" id="pageSizeSelect" disabled>
          <option value="4">4条每页</option>
        </select>
      </div>
      <div class="pull-left">跳至<input type="text" value="1" class="form-control" id="jumpPageInput">页</div>
    </div>
  </div>
<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
<script src="app-assets/js/sweetalert2.js" type="text/javascript"></script>
</body>
</html>

<script>
	$(function(){
    console.log(window.sessionStorage.getItem("empName"))
            var loginMessage = window.sessionStorage.getItem("empName")
            if(loginMessage==null){
                alert("请先登录")
                window.location.href="./index.html"
            }
    window.localStorage.getItem("gouwuche")
    onloadOk(1);
})
var pageNum = 1;
function onloadOk(pageNum){
    $.ajax({
        type: 'get',
        url: 'http://localhost:18081/purchaseOrders/selectAll',
        data: {
            pageNum: pageNum
        },
        success: function(data) {
          pageNum = data.data.pageNum;
          $('#totalCount').html(data.data.total);
				$('#pageNum').html(data.data.pageNum);
				$('#pages').html(data.data.pages);
			$('#showOrder').empty();

			//收货绿色按钮
			// 发货中红色按钮
			// 已发货蓝色按钮
			// 已收货黄色
            console.log(data);
			var buttonFathar = "";
			var buttonClass ="";
            var dataList = data.data.list;
            dataList.forEach(item => {
                var state = "";
                if (item.status == 0) {
                    state = "未发货";
					buttonFathar = "该订单暂未发货"
                } else if (item.status == 1) {
                    state = "发货中";
					buttonFathar = "该订单在发货中"
                } else if (item.status == 2) {
                    state = "已发货";
					buttonFathar = "收货"
					buttonClass = "btn-success";
                } else if (item.status == 3) {
                    state = "已收货";
					buttonFathar = "该订单已收货"
                }
                var str = `
                <tr data-toggle="collapse" data-target="#row3${item.orderId}" aria-expanded="false" aria-controls="row3">
                    <td>${item.orderId}</td>
                    <td>${item.totalPrice}</td>
                    <td>${item.orderDate}</td>
                    <td>${state}</td>
					<td><button class="btn ${buttonClass}" onclick="shouHuoMessage(${item.orderId},'${item.status}','${item.totalPrice}')">${buttonFathar}</button></td>
                </tr>k
                <tr>
                    <td colspan="4">
                        <div class="collapse" id="row3${item.orderId}">
                            <div class="card card-body" id="showSupplier">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>订单ID</th>
                                                <th>供应商昵称</th>
                                                <th>小计</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                                <th>详情</th>
                                            </tr>
                                        </thead>
                                        <tbody id="showsupplierName${item.orderId}">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                `;
                $('#showOrder').append(str);
            });
            // 更新分页按钮
            updatePagination(data.data.pageNum, data.data.pages);
        }
    });
}




function updatePagination(currentPage, totalPages) {
    $('#pagination').empty();

    // 添加上一页按钮
    if (currentPage > 1) {
        $('#pagination').append('<li><a href="#" onclick="changePage(' + (currentPage - 1) + ')"><span aria-hidden="true">«</span></a></li>');
    } else {
        $('#pagination').append('<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>');
    }

    // 添加页码按钮
    for (let i = 1; i <= totalPages; i++) {
        if (i === currentPage) {
            $('#pagination').append('<li class="active"><a href="#">' + i + ' <span class="sr-only">(current)</span></a></li>');
        } else {
            $('#pagination').append('<li><a href="#" onclick="changePage(' + i + ')">' + i + '</a></li>');
        }
    }

    // 添加下一页按钮
    if (currentPage < totalPages) {
        $('#pagination').append('<li><a href="#" onclick="changePage(' + (currentPage + 1) + ')"><span aria-hidden="true">»</span></a></li>');
    } else {
        $('#pagination').append('<li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>');
    }
}






function changePage(pageNum) {
    onloadOk(pageNum);
}


var buttonMessage = "";
$(document).on('click', 'tr[aria-controls="row3"]', function() {
    var orderId = $(this).data('target').replace('#row3', '');
    $.ajax({
        type: 'get',
        url: 'http://localhost:18081/purchaseOrders/querySupplierName',
        data: {
            orderId: orderId
        },
        success: function(data) {
            $('#showsupplierName' + orderId).empty();
            console.log(data);
            var dataMessage = data.data;
            var status = "";
			var buttonClass = ""
            dataMessage.forEach(function(item) {
                if (item.status == 0) {
                    status = "未发货";
                    buttonMessage = "发货";
					buttonClass = "btn-success";
                } else if (item.status == 1 || item.status == 2) {
                    status = "已发货";
                    buttonMessage = "已发货";
					buttonClass = "btn-secondary";
                } else if(item.status == 3){
					status = "已收货";
                    buttonMessage = "已收货";
					buttonClass = "btn-secondary";
				}
                var str = `
                <tr data-toggle="collapse" data-target="#row4${item.supplierName}" aria-expanded="false" aria-controls="row4">
                    <td>${item.orderId}</td>
                    <td>${item.supplierName}</td>
                    <td>${item.totalPrice}</td>
                    <td>${status}</td>
                    <td><button type="button" class="btn ${buttonClass}" onclick="removeAddClass(${item.orderId}, '${item.supplierId}', '${item.status}',this)">${buttonMessage}</button></td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" onclick="xiangqMessage(${item.orderId},'${item.supplierId}')">详情</button></td>
                </tr>
                `;
                $('#showsupplierName' + orderId).append(str);
            });
        }
    });
});

function removeAddClass(orderId, supplierID, status, button) {
    var buttonMessage = $(button).text().trim();
    if (buttonMessage == "发货") {
        alert('订单ID: ' + orderId + ', 供应商id: ' + supplierID);
        alert('发货成功');
        $.ajax({
            type: 'get',
            url: 'http://localhost:18081/purchaseOrders/updateStatus',
            data: {
                orderId: orderId,
                supplierId: supplierID,
                status: status + 1
            },
            success: function(data) {
                console.log(data);
				onloadOk(pageNum);
            }
        });
        $(button).removeClass('btn-success').addClass('btn-secondary').text('已发货');
    } else if (buttonMessage == "已发货") {
        alert('订单ID: ' + orderId + ', 供应商id: ' + supplierID);
        alert('该商品已发货');
    }
}


// 点击详情按钮，获取当前点击的订单的orderId和供应商ID
// $(document).on('click', 'button[data-target="#exampleModalLong"]', function() {
//     var orderId = $(this).closest('tr').find('td:first').text();
//     var supplierId = $(this).closest('tr').find('td:nth-child(2)').text();
// 	alert(orderId+supplierId)
// })


function xiangqMessage(orderId,supplierId){
	alert(orderId+supplierId)
	$.ajax({
		type: 'get',
		url: 'http://localhost:18081/purchaseOrderDetails/queryAllByOrderIdAndSupplierId',
		data: {
			orderId: orderId,
			supplierId: supplierId
		},
		success: function(data) {
			$('#showSupplierAndProductMessage').empty();
			console.log(data);
			var showProductAndPodMessage = data.data;
			showProductAndPodMessage.forEach(function(item){
				var str = `
					<tr>
						<td>${item.productName}</td>
						<td>${item.brand}</td>
						<td>${item.price}</td>
						<td>${item.purchasePrice}</td>
						<td>${item.quantity}</td>
						<td>${item.subtotal}</td>
						<td>${item.description}</td>
					</tr>
				`
				$('#showSupplierAndProductMessage').append(str);
			});
		}
	});
}


function shouHuoMessage(orderId,status,totalPrice){
	if(status==0){
		alert("该订单还未未发货")
		return;
	}else if(status==1){
		alert("该订单正在发货中，请勿着急")
		return;
	}else if(status==2){
		//获取该订单的总金额
		alert(totalPrice)
		$.ajax({
			type: 'post',
			url: 'http://localhost:18081/purchaseOrders/updateStatusByOrderId',
			data: {
				orderId: orderId,
			},
			success: function(data) {
				console.log(data);
				onloadOk(pageNum);
			}
		})
	}else if(status==3){
		alert("该订单已收货！")
		return;
	}
}



// 处理跳转到指定页
$('#jumpPageInput').change(function() {
    const jumpPage = $(this).val();
    const totalPages = $('#pages').text();
    if (jumpPage > 0 && jumpPage <= totalPages) {
        onloadOk(jumpPage);
    } else {
        alert('请输入有效的页码');
    }
});
</script>